<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>
<nz-card>
  <form nz-form (ngSubmit)="search()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control>
            <nz-select
              nzShowSearch
              [(ngModel)]="q.companyId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="companyChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let i of companyList" [nzLabel]="i['company_name']" [nzValue]="i['ID']"></nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <nz-select nzShowSearch [(ngModel)]="q.shopId" name="shopId" nzId="shopId" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let shop of shops" [nzLabel]="shop['fordeal_shop_name']" [nzValue]="shop['shop_id']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shipmentStatus">状态</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.planStatus" name="planStatus" nzId="planStatus" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option
                *ngFor="let statusOption of shipmentStatusOptionTags | keyvalue"
                [nzLabel]="statusOption.value['text']"
                [nzValue]="statusOption.key"
              ></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="fulfillmentCenterId">履约中心</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="q.fulfillmentCenterId" name="fulfillmentCenterId" nzId="fulfillmentCenterId" [nzPlaceHolder]="'请选择'">
              <nz-option nzLabel="全部" nzValue=""></nz-option>
              <nz-option nzLabel="中国" nzValue="CN"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shipmentId">计划编号</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="q.planId" name="planId" placeholder="请输入" id="planId" />
          </nz-form-control>
        </nz-form-item>
      </div>

      <!--      <div nz-col nzMd="6" nzSm="24">-->
      <!--        <nz-form-item>-->
      <!--          <nz-form-label nzFor="skuId">Fordeal SKU</nz-form-label>-->
      <!--          <nz-form-control>-->
      <!--            <input nz-input [(ngModel)]="q.skuId" name="skuId" placeholder="请输入" id="skuId" />-->
      <!--          </nz-form-control>-->
      <!--        </nz-form-item>-->
      <!--      </div>-->

      <div nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
        <!--        <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>-->
      </div>
    </div>
  </form>
  <nz-space nzDirection="vertical"></nz-space>
  <nz-space nzDirection="vertical"></nz-space>
  <nz-table
    #shipmentTable
    [nzData]="listOfData"
    nzSize="default"
    nzShowPagination
    [nzPageSizeOptions]="[5, 15, 30, 45, 60]"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="ps"
    [nzPageIndex]="pi"
    [nzFrontPagination]="false"
    [nzShowQuickJumper]="true"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
    [nzShowTotal]="totalTemplate"
  >
    <thead>
      <tr>
        <th nzAlign="center">计划编号</th>
        <th nzAlign="center">计划名称</th>
        <th nzAlign="center">履约中心</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">创建时间</th>
        <th nzAlign="center">更新时间</th>
        <th nzAlign="center">数量</th>
        <th nzAlign="center">实际收件</th>
        <th nzAlign="center">所属店铺</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of shipmentTable.data">
        <tr>
          <td class="text-center">
            <p>{{ data['planId'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['planName'] }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['fulfillmentCenterName'] }}</p>
          </td>
          <td class="text-center">
            <p>
              <nz-tag [nzColor]="shipmentStatusOptionTags[data['planStatus']]['color']">
                {{ shipmentStatusOptionTags[data['planStatus']]['text'] }}
              </nz-tag>
            </p>
          </td>
          <td class="text-center">
            <p>{{ data['createdAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['updatedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
          </td>
          <td class="text-center">
            <p>{{ data['planQuantity'] }}</p>
          </td>

          <td class="text-center">
            <p>{{ data['receivedQuantity'] }}</p>
          </td>

          <td class="text-center">{{ shopMap[data['shopId']] }}</td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
</nz-card>
